<template>
    <div>
      <h3>这是第五个demo:ref与reactive 修改数值区别</h3>
      <p>
        我叫:{{ name }}, 今年:{{ age }}, 有:{{ obj.car.a1 }}和{{ obj.car.a2 }}
      </p>
      <button @click="changeMain">让我们做一个改变吧</button>
      <button @click="changeName">改变姓名</button>
      <button @click="changeAge">改变年龄</button>
      <button @click="changeCar1">改变车辆一</button>
      <button @click="changeCar2">改变车辆二</button>
    </div>
  </template>
  
  <script setup lang="ts" name="Demo5">
  import { ref, reactive } from "vue";
  let name = ref("小小");
  let news = reactive({
      a:1,
      b:2,
      c:ref(3)
  })
  news.c = 10;
  news.a = 10;
  console.log(news,'news');
  let age = ref(25);
  let obj = reactive({
    car: {
      a1: "玩具车",
      a2: "拖拉机",
    },
  });
  function changeName() {
    name.value = "大大";
  }
  function changeAge() {
    age.value = 30;
  }
  function changeCar1() {
  obj.car.a1 = '画画';
    console.log(obj, "1111");
  }
  function changeCar2() {
      obj.car.a2 = '读书';
  }
  function changeMain() {
      obj.car = {a1:"1",a2:'3'}
  }
  </script>
  <style lang="scss" scoped></style>